<template>
    <div>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="box">
            <h2>推广大使招募</h2>
            <div class="content">
                <h2 class="blue marg">推广大使火热招募中</h2>
                <div class="top blue">
                    <div class="top_box">
                        <span> 在这里，你将得到什么？</span>
                    </div>
                    <div class="top_text top_box">
                        <h5>
                            <van-icon name="youzan-shield" />高额副业收入:
                        </h5>
                        <p>目前的推广商品佣金比例位30-55%,推广人月佣金收入最高可达20000+，更有额外高额推广激励等你挑战！</p>
                    </div>
                    <div class="top_text top_box">
                        <h5>
                            <van-icon name="youzan-shield" />个人IP打造:
                        </h5>
                        <p>专业赋能团队为你量身打造IP形象，只要你想，你也可以成为社群或视频号明星！</p>
                    </div>
                    <div class="top_text top_box">
                        <h5>
                            <van-icon name="youzan-shield" />傻瓜式内容输出:
                        </h5>
                        <p>专业内容团队输出推广内容，零基础也能轻松上手！</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="top_box blue">
                        <span> 怎么加入我们？</span>
                    </div>
                    <div class="top_text top_box">
                        <h5 class="text">
                            <van-icon name="youzan-shield" />个人消费满1000元！
                        </h5>
                        <h5 class="text">
                            <van-icon name="youzan-shield" />审核通过开始推广！
                        </h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <van-radio-group v-model="radio">
                <van-radio name="1" @click="onRadio">我已阅读并同意以上规则</van-radio>
            </van-radio-group>
            <van-button type="warning" class="btn_but" :disabled="flag" @click="applyfor
">申请成为推广员</van-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            radio: "",
            flag: true,
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onRadio() {
            this.flag = !this.flag
        },
        applyfor(){
            console.log('申请');
        }
    },
    watch: {
        flag: {
            handler(lodValue, newVal) {
                if (!newVal) {
                    this.radio = ""
                }
            }
        }
    }
}
</script>
<style  scoped>
.box>h2 {
    text-align: center;
}

.content {
    height: 655px;
    background-color: #FFBD4A;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.btn {
    position: fixed;
    bottom: 5px;
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.btn_but {
    border-radius: 25px;
    width: 90%;
}

.van-radio__label {
    font-size: 15px;
    color: rgb(200, 202, 204);
}

.top {
    width: 80%;
    height: 300px;
    background-color: #fff;
}

.bottom {
    margin-top: 20px;
    width: 80%;
    height: 150px;
    background-color: #fff;
}

.blue {
    color: #354F78;
}

.top_box {
    margin: 20px;
}

.top_box>span {
    font-weight: 700;

}

.top_text {
    margin: 5px 20px;
}

.top_text>p {
    margin-top: 2px;
    font-size: 10px;
    color: #797979;
}

.text{
    margin-top: 2px;
    color: #797979;
}
.marg{
    margin: 20px;
}
</style>
